<template>
  <div>
    <template v-if='!isFiltrate'>
        <div class="Games" >
          <div class="header">
            <router-link to='/home1'>
              <div class="header-left iconfont">&#xe623;</div>
            </router-link>
            <div class="header-center">足球数据</div>
            <div class="header-right iconfont" @click.stop='isFiltrate = !isFiltrate'>&#xe601;</div>
          </div>
          <Games-date v-on:changDateList='changDateListFun'></Games-date>
          <div class="playList">
            <ul v-if='gameList.length > 0'>
                <router-link
                  tag="li"
                  v-for="item of gameList"
                  :key="item.mid"
                  :to="'/Deatil/' + item.mid"
                >
                 <p class="li-tit">
                  <span>{{ item.ln }}<font>{{ item.sd}}</font></span>
                  <i v-if='item.sts == "inprogress"' class="redColor">
                      {{ item.min }}<b class="dian">'</b>
                  </i>
                  <i v-else-if='item.sts == "notstarted"'>未开始</i>
                  <i v-else-if='item.sts == "finished"'>已结束</i>
          <i v-else>取消</i>
                </p>
                <div class="li-con">
                  <div class="li-con-top">
                    <div class="li-con-left">
                      <p><span>{{item.hz | ellipses("8")}}</span><img :src='getImgUrl(item.hig)' :onerror="noImg"></p>
                    </div>
                    <div class="li-con-vs">
                      <p>{{ item.sts == 'inprogress'?(item.hm_rs+'-'+item.aw_rs):item.sts == 'finished'?(item.hm_fs+'-'+item.aw_fs):'vs'}}</p>
                    </div>
                    <div class="li-con-right">
                      <p><img :src='getImgUrl(item.aig)' :onerror="noImg"><span>{{ item.az | ellipses("8")}}</span></p>
                    </div>
                  </div>
                  <div class="li-con-bottom">
                    <div class="li-con-left">
                      <font>{{ item.hr?("["+item.hr+"]"):''}}</font>
                    </div>
                    <div class="li-con-vs">
                      <div> {{ item.sts == 'inprogress'?(item.hm_hs+'-'+item.aw_hs):item.sts == 'finished'?(item.hm_hs+'-'+item.aw_hs):''}}</div>
                    </div>
                    <div class="li-con-right">
                      <font>{{ item.ar?'['+item.ar+']':''}}</font>
                    </div>
                  </div>
                </div>
                </router-link>
              </ul>
              <p v-else class="noData">暂无比赛</p>
          </div>
        </div>  
    </template>
    <template v-else>
      <Games-filtrate :list='opList' @handcheckList='handcheckListEvent'></Games-filtrate>
    </template>
  </div>
</template>
<script>
import GamesDate from './components/Date'
import GamesFiltrate from './components/filtrate'
import axios from 'axios'
import { Toast,Indicator  } from 'mint-ui'
export default {
	name: 'Games',
	components:{
		GamesDate,
    GamesFiltrate
	},
	data:function(){
		return {
			AllgameList:[],
      gameList:[],
      year:'',
      month:'',
      currentDay:'',
			noImg:'this.src="/static/img/soccerbig.png"',
      isFiltrate:false,
		}
	},
	methods:{
		getHomeInfo:function(date){
			Indicator.open({
			  text: '加载中···',
			  spinnerType: 'fading-circle'
			});
      	axios.get('/api/allMatch.php?sportType=1&dateStr='+date)
        .then(this.getHomeInfoSucc)
        .catch(function (error) {
            console.log(error);
          });
    },
    getHomeInfoSucc:function(res){
      res = res.data
      if (res.status == 0 && res.data) {
          const Fdata = res.data.f //所有结束的比赛信息
          const Idata = res.data.i //所有正在进行中的比赛信息
          const Ndata = res.data.n //所有未开始的比赛信息
          const Cdata = res.data.c //所有取消的比赛信息
          const IrCdata = res.data.ir //所有取消的比赛信息
          const opList = res.data.op //所有联赛信息
          this.AllgameList = Idata.concat(Ndata,Fdata,IrCdata,Cdata)
          this.gameList = this.AllgameList
          this.opList = opList
          Indicator.close();
      }
    },
    getImgUrl:function(url) {
      return url;
   },
   changDateListFun:function(data){
    this.currentDay = data
    this.getHomeInfo(this.year+'-'+this.month+'-'+data)
   },
   handcheckListEvent(list){
          this.isFiltrate = !this.isFiltrate
          var newList = [];
          this.AllgameList.forEach(function(item,i) {
            if (list.indexOf(item.tournament_stage_id) > -1) {
              newList.push(item)
            } 
          })
        this.gameList = newList;
        }
	},
	mounted () {
		var myDate = new Date();
		var month = myDate.getMonth()+1;//当前月
    if (month < 10) {
      month = '0'+month
    }
		var year = myDate.getFullYear();//当前年
		var day = myDate.getDate(); //当天日
    if (day < 10) {
        day = '0'+day
      }
		this.year = year
    this.month =month
    this.currentDay = day
		this.getHomeInfo(year+'-'+month+'-'+day);
	},
  activated () {}
};
</script>
<style lang="less" scoped>
  @import '~styles/header.less';
  @import '~styles/varibles.less';
  .playList{
    padding-top:2.7rem; 
  }
  .title{
    padding: .25rem;
    text-align: left; 
    span{
      height: .27rem;
      line-height: .27rem;
      overflow: hidden;
      border-left:.06rem @greenColor solid;
      padding-left:.18rem;
    }
  }
  .li-tit{
    height: .49rem;
    line-height: .49rem;
    display: flex;
    padding:0 .25rem;
    justify-content: space-between;
    background: #F5F8FB;
    span{
      flex: 1;
      color: #828181;
      font{
        margin-left:.4rem;
        color: #2F2F2F;
      }
    }
    i{
      font-size: .22rem;
      color: #828181;
    }
  }
   .li-con-top{
    display: flex;
    align-items: center;
    line-height: .6rem;
  }
  .li-con-bottom{
    display: flex;
    align-items: flex-end;
    line-height: .6rem;
  }
  .li-con{
    padding:.25rem .05rem;
    text-align: center;
    font-size: .24rem;
    .li-rank{
      font-size: .22rem;
      color: @grayColor;
    }
    .li-con-left,.li-con-right{
      flex: 6;
      text-align: right;
      img {
        width: .5rem;
        height: .5rem;
        margin-left: .1rem;
      }
      p{
        span{
          display: inline-block;
          height: .5rem;
          line-height: .5rem;
        }
      }
      font{
        display: block;
        padding-top:.2rem;
        padding-left:.6rem;
      }
    }
    .li-con-right{
      text-align: left;
      img{
        margin:0;
        margin-right: .1rem;
      }
      font{
        padding-right:.6rem;
        padding-left:0;
      }
    }
  }
  @keyframes mymove{
      0% {opacity:1;}
      80% {opacity:1;}
      100% {opacity:0;}
  }
  @-moz-keyframes mymove{
      0% {opacity:1;}
      80% {opacity:1;}
      100% {opacity:0;}
  }
  @-o-keyframes mymove{
      0% {opacity:1;}
      80% {opacity:1;}
      100% {opacity:0;}
  }
  @-webkit-keyframes mymove{
      0% {opacity:1;}
      80% {opacity:1;}
      100% {opacity:0;}
  }
  @-ms-keyframes mymove{
      0% {opacity:1;}
      80% {opacity:1;}
      100% {opacity:0;}
  }
  .dian{
    padding-left:.05rem;
    animation:mymove 1s infinite;
    -moz-animation:mymove 1s infinite; /* Firefox */
    -webkit-animation:mymove 1s infinite; /* Safari and Chrome */
    -o-animation:mymove 1s infinite; /* Opera */
  }
</style>
